<template>
  <div class="search-history-box">
    <!-- 标题cell -->
    <van-cell title="搜索历史">
      <template>
        <van-icon
          name="delete-o"
          v-if="!isDel"
          @click="isDel = true"
        ></van-icon>
        <template v-else>
          <span class="delete" @click="history.splice(0)">全部删除</span>
          <span @click="isDel = false">完成</span>
        </template>
      </template>
    </van-cell>
    <!-- 历史记录cell -->
    <van-cell
      :title="item"
      v-for="(item, index) in history"
      :key="item"
      @click="clearClick(index, item)"
    >
      <van-icon name="close" v-if="isDel"></van-icon>
    </van-cell>
    <!-- 空状态 -->
    <!-- 通用错误 -->
    <van-empty
      image="error"
      description="暂无历史记录"
      v-if="!isDel && !history.length"
    />
  </div>
</template>

<script>
export default {
  props: {
    // 历史记录数据
    history: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      // 删除状态
      isDel: false
    }
  },
  created () {

  },
  methods: {
    // 删除或跳转
    clearClick (index, item) {
      this.isDel ? this.history.splice(index, 1) : this.$emit('search', item)
    }
  }
}
</script>

<style scoped lang='less'>
.search-history-box {
  .delete {
    margin-right: 10px;
  }
}
</style>
